<template>
    <div>
        <el-button type="primary" @click="updateData">更新数据</el-button>
    </div>
    <div>
        <div id="main" style="width: 600px; height: 400px;"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue'
import { getAmountByLastWeek } from '@/api/api'

var myChart = null;

// 动态获取数据
const updateData = () => {
    console.log('动态获取数据');
    
}

// 页面加载生命周期函数
onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(document.getElementById('main'));

    // 获取动态数据
    getAmountByLastWeek().then(res => {
        if(res.data.code == 200) {
            let names = res.data.data.names;
            let data = res.data.data.list;

            // 绘制图表
            myChart.setOption({
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                xAxis: {
                    data: names
                },
                yAxis: {},
                series: [
                    {
                    name: '销量',
                    type: 'bar',
                    data: data
                    }
                ]
            });
        }
    })


});

</script>

<style scoped>

</style>